<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" th:src="@{https://api.map.baidu.com/api?v=2.0& ak=9LVtztl4kxzEXtCCqb2824GOp0rSdmSC}">
//ak填自己申请的ak
</script>
<title>百度地图api展示</title>
</head>
<body>
<p id="allmap"></p>
</body>
</html>
<script type="text/javascript">
/* 1.创建地图实例：var map = new BMap.Map("container");
    2.创建中心点坐标：var point = new BMap.Point(116.404, 39.915);
    3.初始化地图,设置中心点坐标和地图级别：map.centerAndZoom(point, 14);
    5.获取坐标点：
        如： var points = [
              new BMap.Point(116.411776,39.942833),
              new BMap.Point(116.320791,40.003682)
            ];
    6.创建标注：
        如：var marker1 =new BMap.Marker(points[1]);
            var marker2 =new BMap.Marker(points[2]);
    7.将标注添加到地图中：
        如：map.addOverlay(marker1);
            map.addOverlay(marker2);
    8.调整地图的最佳视野为显示标注数组point：
        如：map.setViewport(points); */
	//1.创建地图实例：var map = new BMap.Map("container");
   /*  var points = [  
        {"lng":112.58,"lat":26.89,"url":"https://www.baidu.com","id":1,"name":"p1"},  
        {"lng":112.59,"lat":26.90,"url":"https://www.mi.com","id":2,"name":"p2"},  
        {"lng":112.57,"lat":26.88,"url":"https://www.csdn.com","id":3,"name":"p3"}  
        ];  */
   // var index=null;
	var map = new BMap.Map("allmap");
	var geocoder= new BMap.Geocoder(); 
	map.addEventListener("click",function(e){
		//清除标记
		map.clearOverlays();
		//alert(e.point.lng + "," + e.point.lat);
		index= e.point.lng + "," + e.point.lat;
		//创建小狐狸图标
		var pt = new BMap.Point(e.point.lng,e.point.lat);
		var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
		var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
		map.addOverlay(marker2);              // 将标注添加到地图中
		geocoder.getLocation(e.point,function(rs){ 
			console.log(rs.address); //地址描述(string) 
			console.log(rs.addressComponents);//结构化的地址描述(object) 
			console.log(rs.addressComponents.province); //省 
			console.log(rs.addressComponents.city); //城市 
			console.log(rs.addressComponents.district); //区县 
			console.log(rs.addressComponents.street); //街道 
			console.log(rs.addressComponents.streetNumber); //门牌号 
			console.log(rs.surroundingPois); //附近的POI点(array) 
			console.log(rs.business); //商圈字段，代表此点所属的商圈(string) 
			}); 

	});
	//2.创建中心点坐标：
	map.centerAndZoom(new BMap.Point(113.933349,35.308973), 11);  // 设置中心点
	//3.初始化地图,设置中心点坐标和地图级别：
	map.centerAndZoom( "新乡");//设置为新乡
	map.setCurrentCity("新乡");          
	map.addControl(new BMap.MapTypeControl());   
	map.enableScrollWheelZoom(true);     
	//addMarker(points);
	
	//6.创建标注7.并添加到地图中
	/* function addMarker(points) {
	    //循环建立标注点
	    for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
	        var point = new BMap.Point(points[i].lng, points[i].lat); //将标注点转化成地图上的点
	        var marker = new BMap.Marker(point); //将点转化成标注点
	        map.addOverlay(marker);  //将标注点添加到地图上
	        //添加监听事件
	        (function() {
	            var thePoint = points[i];
	            marker.addEventListener("click",function() {
	                showInfo(this,thePoint);
	            });
	         })();  
	    }
	}
	function showInfo(thisMarker,point) {
	    //获取点的信息
	    var sContent ='<ul style="margin:0 0 5px 0;padding:0.2em 0">'+'<li style="line-height: 26px;font-size: 15px;">'+'<span style="width: 50px;display: inline-block;">id：</span>' + point.id + '</li>'+'<li style="line-height: 26px;font-size: 15px;">'+'<span style="width: 50px;display: inline-block;">名称：</span>' + point.name + '</li>'+'<li style="line-height: 26px;font-size: 15px;"><span style="width: 50px;display: inline-block;">查看：</span><a href="'+point.url+'">详情</a></li>'+'</ul>';
	    var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
	    thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
	} */
</script>